<template>
  <div class="course-container">
    <nav-bar></nav-bar>
    <div class="course-content">
      <!-- 课程头部信息区域 -->
      <div class="course-header">
        <!-- 左侧课程图片 -->
        <div class="course-image">
          <img :src="courseImage" :alt="courseTitle">
        </div>
        
        <!-- 右侧课程标题和按钮 -->
        <div class="course-header-info">
          <h1 class="course-title">{{ courseTitle }}</h1>
          <button class="start-btn" @click="startLearning">开始学习</button>
        </div>
      </div>
      
      <!-- 课程详情区域 -->
      <div class="course-details">
        <!-- 课程简介 -->
        <div class="course-intro">
          <h2>课程简介</h2>
          <div class="instructor-info">
            <span class="label">讲师：</span>
            <span>{{ courseInstructor }}</span>
          </div>
          <p class="description">{{ courseDescription }}</p>
        </div>
        
        <!-- 课程大纲 -->
        <div class="course-outline">
          <h2>课程大纲</h2>
          <div class="chapters">
            <div class="chapter" v-for="(chapter, index) in chapters" :key="index">
              <div class="chapter-header" @click="toggleChapter(index)">
                <h3>{{ chapter.title }}</h3>
                <span class="toggle-icon">{{ chapter.isOpen ? '▼' : '▶' }}</span>
              </div>
              <div class="chapter-content" v-if="chapter.isOpen">
                <ul>
                  <li v-for="(lesson, lessonIndex) in chapter.lessons" :key="lessonIndex"
                    @click="updateLearningProgress(index, lessonIndex + 1)"
                    class="lesson-item">
                    {{ lesson.title }}
                    <span class="lesson-duration">{{ lesson.duration }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
  name: 'CourseDetailView',
  components: {
    NavBar
  },
  data() {
    return {
      courseId: '',
      courseTitle: '',
      courseInstructor: '',
      courseDescription: '',
      courseImage: '',
      chapters: [
        {
          title: '第一章：算法基础',
          isOpen: true,
          lessons: [
            { title: '1.1 算法概述与复杂度分析', duration: '45分钟' },
            { title: '1.2 渐进符号与增长率', duration: '30分钟' },
            { title: '1.3 递归与分治策略', duration: '50分钟' }
          ]
        },
        {
          title: '第二章：排序算法',
          isOpen: false,
          lessons: [
            { title: '2.1 插入排序与归并排序', duration: '40分钟' },
            { title: '2.2 快速排序与堆排序', duration: '45分钟' },
            { title: '2.3 线性时间排序算法', duration: '35分钟' }
          ]
        },
        {
          title: '第三章：动态规划',
          isOpen: false,
          lessons: [
            { title: '3.1 动态规划基本原理', duration: '50分钟' },
            { title: '3.2 最优子结构与重叠子问题', duration: '45分钟' },
            { title: '3.3 经典动态规划问题求解', duration: '60分钟' }
          ]
        }
      ]
    }
  },
  created() {
    // 从路由参数获取课程ID
    if (this.$route.query.id) {
      this.courseId = this.$route.query.id;
      // 获取课程数据
      this.fetchCourseData(this.courseId);
      
      // 如果有章节和课程索引参数，打开对应章节
      if (this.$route.query.chapterIndex !== undefined) {
        const chapterIndex = parseInt(this.$route.query.chapterIndex);
        if (chapterIndex >= 0 && chapterIndex < this.chapters.length) {
          // 打开指定章节
          this.chapters.forEach((chapter, index) => {
            chapter.isOpen = (index === chapterIndex);
          });
        }
      }
    }
  },
  methods: {
    toggleChapter(index) {
      this.chapters[index].isOpen = !this.chapters[index].isOpen;
    },
    
    updateLearningProgress(chapterIndex, lessonIndex) {
      // 从localStorage获取现有的学习课程列表
      let learningCourses = JSON.parse(localStorage.getItem('learningCourses')) || {};
      let inProgressCourses = learningCourses['正在进行'] || [];
      
      // 查找当前课程
      const courseIndex = inProgressCourses.findIndex(course => course.id === this.courseId);
      
      if (courseIndex !== -1) {
        // 更新课程进度
        inProgressCourses[courseIndex].lastChapter = chapterIndex;
        inProgressCourses[courseIndex].lastLesson = lessonIndex;
        inProgressCourses[courseIndex].buttonText = '继续';
        
        // 计算进度百分比
        let totalLessons = 0;
        let completedLessons = 0;
        
        this.chapters.forEach((chapter, cIndex) => {
          totalLessons += chapter.lessons.length;
          
          if (cIndex < chapterIndex) {
            completedLessons += chapter.lessons.length;
          } else if (cIndex === chapterIndex) {
            completedLessons += lessonIndex;
          }
        });
        
        // 更新进度
        inProgressCourses[courseIndex].progress = Math.round((completedLessons / totalLessons) * 100);
        
        // 更新localStorage
        learningCourses['正在进行'] = inProgressCourses;
        localStorage.setItem('learningCourses', JSON.stringify(learningCourses));
      }
    },
    startLearning() {
      // 将课程添加到用户的学习列表中
      const courseInfo = {
        id: this.courseId,
        title: this.courseTitle,
        school: this.courseInstructor.split('教授')[0] + '大学', // 模拟学校名称
        progress: 0,
        buttonText: '马上开始',
        lastChapter: 0,
        lastLesson: 0,
        chapters: this.chapters
      };
      
      // 从localStorage获取现有的学习课程列表
      let learningCourses = JSON.parse(localStorage.getItem('learningCourses')) || {};
      let inProgressCourses = learningCourses['正在进行'] || [];
      
      // 检查课程是否已经在列表中
      const existingCourseIndex = inProgressCourses.findIndex(course => course.id === courseInfo.id);
      
      if (existingCourseIndex === -1) {
        // 如果课程不在列表中，添加它
        inProgressCourses.push(courseInfo);
      } else {
        // 如果课程已经在列表中，更新它
        inProgressCourses[existingCourseIndex] = courseInfo;
      }
      
      // 更新localStorage
      learningCourses['正在进行'] = inProgressCourses;
      localStorage.setItem('learningCourses', JSON.stringify(learningCourses));
      
      // 跳转到我的学习页面
      this.$router.push('/my-learning');
    },
    fetchCourseData(courseId) {
      // 模拟从后端获取课程数据
      // 根据课程ID获取对应的课程数据
      const courseData = this.getCourseById(courseId);
      
      if (courseData) {
        this.courseTitle = courseData.title;
        this.courseInstructor = courseData.instructor;
        this.courseImage = courseData.image;
        
        // 根据课程ID设置不同的课程描述和章节
        this.setCourseDetails(courseId);
      }
    },
    getCourseById(courseId) {
      // 所有课程数据
      const allCourses = [
        ...this.getAlgorithmCourses(),
        ...this.getPythonCourses(),
        ...this.getBigDataCourses()
      ];
      
      // 查找匹配的课程
      return allCourses.find(course => course.title === courseId);
    },
    getAlgorithmCourses() {
      return [
        {
          title: '算法设计与分析',
          instructor: '张教授',
          rating: '4.7',
          reviews: '164',
          image: require('@/assets/courses/1.jpg')
        },
        {
          title: '数据结构与算法',
          instructor: '李教授',
          rating: '4.6',
          reviews: '173',
          image: require('@/assets/courses/2.jpg')
        },
        {
          title: '大数据算法',
          instructor: '王教授',
          rating: '4.4',
          reviews: '44',
          image: require('@/assets/courses/3.jpg')
        },
        {
          title: '程序设计与算法',
          instructor: '刘教授',
          rating: '4.8',
          reviews: '19',
          image: require('@/assets/courses/4.jpg')
        }
      ];
    },
    getPythonCourses() {
      return [
        {
          title: 'Python基础教程',
          instructor: '王教授',
          rating: '4.8',
          reviews: '245',
          image: require('@/assets/courses/1.jpg')
        },
        {
          title: 'Python高级编程',
          instructor: '李教授',
          rating: '4.7',
          reviews: '189',
          image: require('@/assets/courses/2.jpg')
        },
        {
          title: 'Python数据分析',
          instructor: '张教授',
          rating: '4.6',
          reviews: '156',
          image: require('@/assets/courses/3.jpg')
        },
        {
          title: 'Python爬虫技术',
          instructor: '刘教授',
          rating: '4.5',
          reviews: '132',
          image: require('@/assets/courses/4.jpg')
        }
      ];
    },
    getBigDataCourses() {
      return [
        {
          title: '大数据处理技术',
          instructor: '张教授',
          rating: '4.7',
          reviews: '198',
          image: require('@/assets/courses/1.jpg')
        },
        {
          title: '数据仓库与挖掘',
          instructor: '王教授',
          rating: '4.6',
          reviews: '167',
          image: require('@/assets/courses/2.jpg')
        },
        {
          title: 'Hadoop生态系统',
          instructor: '李教授',
          rating: '4.5',
          reviews: '145',
          image: require('@/assets/courses/3.jpg')
        },
        {
          title: '实时流处理',
          instructor: '刘教授',
          rating: '4.8',
          reviews: '178',
          image: require('@/assets/courses/4.jpg')
        }
      ];
    },
    setCourseDetails(courseId) {
      // 根据课程ID设置不同的课程描述和章节
      switch(courseId) {
        case '算法设计与分析':
          this.courseDescription = '本课程深入讲解算法设计与分析的核心概念和方法，涵盖分治策略、动态规划、贪心算法等经典算法思想。通过理论讲解和实践案例，帮助学习者掌握算法设计技巧，提高解决复杂问题的能力。';
          this.chapters = [
            {
              title: '第一章：算法基础',
              isOpen: true,
              lessons: [
                { title: '1.1 算法概述与复杂度分析', duration: '45分钟' },
                { title: '1.2 渐进符号与增长率', duration: '30分钟' },
                { title: '1.3 递归与分治策略', duration: '50分钟' }
              ]
            },
            {
              title: '第二章：排序算法',
              isOpen: false,
              lessons: [
                { title: '2.1 插入排序与归并排序', duration: '40分钟' },
                { title: '2.2 快速排序与堆排序', duration: '45分钟' },
                { title: '2.3 线性时间排序算法', duration: '35分钟' }
              ]
            },
            {
              title: '第三章：动态规划',
              isOpen: false,
              lessons: [
                { title: '3.1 动态规划基本原理', duration: '50分钟' },
                { title: '3.2 最优子结构与重叠子问题', duration: '45分钟' },
                { title: '3.3 经典动态规划问题求解', duration: '60分钟' }
              ]
            }
          ];
          break;
        case '数据结构与算法':
          this.courseDescription = '本课程系统讲解数据结构与算法的基本概念、实现方法和应用场景。从基础的数组、链表到高级的树、图结构，从简单排序到高效查找，全面提升学习者的编程能力和算法思维。';
          this.chapters = [
            {
              title: '第一章：基本数据结构',
              isOpen: true,
              lessons: [
                { title: '1.1 数组与链表', duration: '40分钟' },
                { title: '1.2 栈与队列', duration: '35分钟' },
                { title: '1.3 哈希表', duration: '45分钟' }
              ]
            },
            {
              title: '第二章：树结构',
              isOpen: false,
              lessons: [
                { title: '2.1 二叉树基础', duration: '50分钟' },
                { title: '2.2 平衡树与红黑树', duration: '55分钟' },
                { title: '2.3 堆与优先队列', duration: '40分钟' }
              ]
            },
            {
              title: '第三章：图算法',
              isOpen: false,
              lessons: [
                { title: '3.1 图的表示与遍历', duration: '45分钟' },
                { title: '3.2 最短路径算法', duration: '50分钟' },
                { title: '3.3 最小生成树', duration: '40分钟' }
              ]
            }
          ];
          break;
        case '大数据算法':
          this.courseDescription = '本课程专注于大数据环境下的算法设计与优化，介绍分布式计算模型、并行算法设计以及大规模数据处理技术。通过实际案例分析，帮助学习者掌握处理海量数据的有效方法。';
          this.chapters = [
            {
              title: '第一章：大数据概述',
              isOpen: true,
              lessons: [
                { title: '1.1 大数据特性与挑战', duration: '40分钟' },
                { title: '1.2 分布式计算模型', duration: '45分钟' },
                { title: '1.3 大数据处理框架', duration: '50分钟' }
              ]
            },
            {
              title: '第二章：大数据算法基础',
              isOpen: false,
              lessons: [
                { title: '2.1 MapReduce编程模型', duration: '55分钟' },
                { title: '2.2 并行算法设计', duration: '50分钟' },
                { title: '2.3 数据分片与负载均衡', duration: '45分钟' }
              ]
            },
            {
              title: '第三章：大数据挖掘算法',
              isOpen: false,
              lessons: [
                { title: '3.1 大规模机器学习', duration: '60分钟' },
                { title: '3.2 推荐系统算法', duration: '55分钟' },
                { title: '3.3 图计算与社交网络分析', duration: '50分钟' }
              ]
            }
          ];
          break;
        case '程序设计与算法':
          this.courseDescription = '本课程结合程序设计思想与算法技巧，从编程基础到高级算法应用，全面提升学习者的编程能力。通过丰富的编程实践和算法分析，培养解决实际问题的综合能力。';
          this.chapters = [
            {
              title: '第一章：程序设计基础',
              isOpen: true,
              lessons: [
                { title: '1.1 编程范式与思想', duration: '45分钟' },
                { title: '1.2 数据类型与控制结构', duration: '40分钟' },
                { title: '1.3 函数与模块化设计', duration: '50分钟' }
              ]
            },
            {
              title: '第二章：算法设计方法',
              isOpen: false,
              lessons: [
                { title: '2.1 分治法与递归', duration: '45分钟' },
                { title: '2.2 贪心策略', duration: '40分钟' },
                { title: '2.3 动态规划', duration: '55分钟' }
              ]
            },
            {
              title: '第三章：高级算法应用',
              isOpen: false,
              lessons: [
                { title: '3.1 搜索与回溯', duration: '50分钟' },
                { title: '3.2 字符串处理算法', duration: '45分钟' },
                { title: '3.3 算法优化与性能分析', duration: '60分钟' }
              ]
            }
          ];
          break;
        case 'Python基础教程':
          this.courseDescription = '本课程从零开始，系统讲解Python编程语言的基础知识和核心概念。通过丰富的实例和练习，帮助初学者快速掌握Python编程技能，为进一步学习打下坚实基础。';
          this.chapters = [
            {
              title: '第一章：Python入门',
              isOpen: true,
              lessons: [
                { title: '1.1 Python简介与环境搭建', duration: '40分钟' },
                { title: '1.2 变量、数据类型与运算符', duration: '45分钟' },
                { title: '1.3 控制流语句', duration: '50分钟' }
              ]
            },
            {
              title: '第二章：Python数据结构',
              isOpen: false,
              lessons: [
                { title: '2.1 列表与元组', duration: '45分钟' },
                { title: '2.2 字典与集合', duration: '40分钟' },
                { title: '2.3 字符串处理', duration: '35分钟' }
              ]
            },
            {
              title: '第三章：函数与模块',
              isOpen: false,
              lessons: [
                { title: '3.1 函数定义与调用', duration: '40分钟' },
                { title: '3.2 模块与包', duration: '45分钟' },
                { title: '3.3 文件操作', duration: '50分钟' }
              ]
            }
          ];
          break;
        case 'Python高级编程':
          this.courseDescription = '本课程深入探讨Python高级编程技术，包括面向对象编程、装饰器、生成器、并发编程等进阶内容。通过实际项目案例，提升学习者的Python编程水平和代码质量。';
          this.chapters = [
            {
              title: '第一章：面向对象编程',
              isOpen: true,
              lessons: [
                { title: '1.1 类与对象', duration: '50分钟' },
                { title: '1.2 继承与多态', duration: '45分钟' },
                { title: '1.3 魔术方法与运算符重载', duration: '55分钟' }
              ]
            },
            {
              title: '第二章：函数式编程',
              isOpen: false,
              lessons: [
                { title: '2.1 装饰器与闭包', duration: '50分钟' },
                { title: '2.2 生成器与迭代器', duration: '45分钟' },
                { title: '2.3 高阶函数与lambda表达式', duration: '40分钟' }
              ]
            },
            {
              title: '第三章：并发与异步编程',
              isOpen: false,
              lessons: [
                { title: '3.1 多线程编程', duration: '55分钟' },
                { title: '3.2 多进程与进程池', duration: '50分钟' },
                { title: '3.3 异步IO与协程', duration: '60分钟' }
              ]
            }
          ];
          break;
        case 'Python数据分析':
          this.courseDescription = '本课程专注于Python数据分析技术，详细讲解NumPy、Pandas、Matplotlib等核心库的使用方法。通过实际数据集的分析案例，培养学习者数据处理、可视化和分析的综合能力。';
          this.chapters = [
            {
              title: '第一章：数据分析基础',
              isOpen: true,
              lessons: [
                { title: '1.1 数据分析概述', duration: '40分钟' },
                { title: '1.2 NumPy数组操作', duration: '50分钟' },
                { title: '1.3 数据预处理技术', duration: '45分钟' }
              ]
            },
            {
              title: '第二章：Pandas数据处理',
              isOpen: false,
              lessons: [
                { title: '2.1 Series与DataFrame', duration: '55分钟' },
                { title: '2.2 数据清洗与转换', duration: '50分钟' },
                { title: '2.3 数据聚合与分组', duration: '45分钟' }
              ]
            },
            {
              title: '第三章：数据可视化',
              isOpen: false,
              lessons: [
                { title: '3.1 Matplotlib基础', duration: '45分钟' },
                { title: '3.2 Seaborn统计可视化', duration: '50分钟' },
                { title: '3.3 交互式可视化', duration: '55分钟' }
              ]
            }
          ];
          break;
        case 'Python爬虫技术':
          this.courseDescription = '本课程全面介绍Python网络爬虫技术，从基础的HTTP请求到高级的分布式爬虫，系统讲解爬虫开发的各个环节。通过实战项目，掌握数据采集、解析、存储的完整流程。';
          this.chapters = [
            {
              title: '第一章：爬虫基础',
              isOpen: true,
              lessons: [
                { title: '1.1 HTTP协议与网页结构', duration: '45分钟' },
                { title: '1.2 Requests库入门', duration: '40分钟' },
                { title: '1.3 网页解析技术', duration: '50分钟' }
              ]
            },
            {
              title: '第二章：爬虫进阶',
              isOpen: false,
              lessons: [
                { title: '2.1 Selenium动态页面抓取', duration: '55分钟' },
                { title: '2.2 验证码识别与绕过', duration: '50分钟' },
                { title: '2.3 反爬虫策略与应对', duration: '60分钟' }
              ]
            },
            {
              title: '第三章：爬虫框架与应用',
              isOpen: false,
              lessons: [
                { title: '3.1 Scrapy框架入门', duration: '55分钟' },
                { title: '3.2 分布式爬虫设计', duration: '50分钟' },
                { title: '3.3 爬虫数据存储与分析', duration: '45分钟' }
              ]
            }
          ];
          break;
        case '大数据处理技术':
          this.courseDescription = '本课程介绍大数据处理的核心技术和工具，包括Hadoop、Spark等分布式计算框架的原理与应用。通过实际案例，帮助学习者掌握大规模数据处理的方法和技巧。';
          this.chapters = [
            {
              title: '第一章：大数据技术概述',
              isOpen: true,
              lessons: [
                { title: '1.1 大数据生态系统', duration: '45分钟' },
                { title: '1.2 分布式存储原理', duration: '50分钟' },
                { title: '1.3 分布式计算模型', duration: '55分钟' }
              ]
            },
            {
              title: '第二章：Hadoop生态系统',
              isOpen: false,
              lessons: [
                { title: '2.1 HDFS架构与操作', duration: '50分钟' },
                { title: '2.2 MapReduce编程模型', duration: '55分钟' },
                { title: '2.3 YARN资源管理', duration: '45分钟' }
              ]
            },
            {
              title: '第三章：Spark大数据处理',
              isOpen: false,
              lessons: [
                { title: '3.1 Spark核心概念', duration: '50分钟' },
                { title: '3.2 Spark SQL数据处理', duration: '55分钟' },
                { title: '3.3 Spark Streaming实时计算', duration: '60分钟' }
              ]
            }
          ];
          break;
        case '数据仓库与挖掘':
          this.courseDescription = '本课程系统讲解数据仓库设计原理和数据挖掘技术，从数据建模、ETL到数据分析和知识发现，全面介绍企业级数据处理和分析的方法论和实践。';
          this.chapters = [
            {
              title: '第一章：数据仓库基础',
              isOpen: true,
              lessons: [
                { title: '1.1 数据仓库架构与设计', duration: '50分钟' },
                { title: '1.2 维度建模技术', duration: '55分钟' },
                { title: '1.3 ETL流程与工具', duration: '45分钟' }
              ]
            },
            {
              title: '第二章：数据挖掘方法',
              isOpen: false,
              lessons: [
                { title: '2.1 分类与预测', duration: '55分钟' },
                { title: '2.2 聚类分析', duration: '50分钟' },
                { title: '2.3 关联规则挖掘', duration: '45分钟' }
              ]
            },
            {
              title: '第三章：数据分析应用',
              isOpen: false,
              lessons: [
                { title: '3.1 OLAP与多维分析', duration: '50分钟' },
                { title: '3.2 数据可视化与报表', duration: '45分钟' },
                { title: '3.3 商业智能应用案例', duration: '60分钟' }
              ]
            }
          ];
          break;
        case 'Hadoop生态系统':
          this.courseDescription = '本课程深入探讨Hadoop生态系统的各个组件及其应用，包括HDFS、MapReduce、Hive、HBase等核心技术。通过实际操作和案例分析，掌握大数据平台的搭建和使用方法。';
          this.chapters = [
            {
              title: '第一章：Hadoop核心组件',
              isOpen: true,
              lessons: [
                { title: '1.1 Hadoop架构与部署', duration: '55分钟' },
                { title: '1.2 HDFS分布式文件系统', duration: '50分钟' },
                { title: '1.3 MapReduce编程模型', duration: '60分钟' }
              ]
            },
            {
              title: '第二章：数据处理工具',
              isOpen: false,
              lessons: [
                { title: '2.1 Hive数据仓库', duration: '55分钟' },
                { title: '2.2 Pig数据流处理', duration: '45分钟' },
                { title: '2.3 Sqoop数据传输', duration: '40分钟' }
              ]
            },
            {
              title: '第三章：NoSQL与实时处理',
              isOpen: false,
              lessons: [
                { title: '3.1 HBase分布式数据库', duration: '55分钟' },
                { title: '3.2 Kafka消息系统', duration: '50分钟' },
                { title: '3.3 Storm实时计算', duration: '60分钟' }
              ]
            }
          ];
          break;
        case '实时流处理':
          this.courseDescription = '本课程专注于大数据实时流处理技术，详细介绍Kafka、Storm、Flink等流处理框架的原理与应用。通过实际案例，掌握实时数据采集、处理和分析的完整技术栈。';
          this.chapters = [
            {
              title: '第一章：流处理基础',
              isOpen: true,
              lessons: [
                { title: '1.1 流处理架构与模型', duration: '45分钟' },
                { title: '1.2 实时与批处理对比', duration: '40分钟' },
                { title: '1.3 流处理应用场景', duration: '50分钟' }
              ]
            },
            {
              title: '第二章：消息队列与数据采集',
              isOpen: false,
              lessons: [
                { title: '2.1 Kafka架构与原理', duration: '55分钟' },
                { title: '2.2 消息发布与订阅', duration: '45分钟' },
                { title: '2.3 数据集成与ETL', duration: '50分钟' }
              ]
            },
            {
              title: '第三章：流计算引擎',
              isOpen: false,
              lessons: [
                { title: '3.1 Storm实时计算', duration: '55分钟' },
                { title: '3.2 Flink流处理框架', duration: '60分钟' },
                { title: '3.3 Spark Streaming应用', duration: '50分钟' }
              ]
            }
          ];
          break;
        default:
          // 默认课程内容
          this.courseDescription = '本课程提供全面的学习内容，帮助学习者掌握相关领域的核心知识和技能。通过系统的理论讲解和丰富的实践案例，提升学习者的专业能力和解决问题的能力。';
          this.chapters = [
            {
              title: '第一章：基础知识',
              isOpen: true,
              lessons: [
                { title: '1.1 领域概述', duration: '45分钟' },
                { title: '1.2 核心概念', duration: '40分钟' },
                { title: '1.3 基本方法', duration: '50分钟' }
              ]
            },
            {
              title: '第二章：进阶内容',
              isOpen: false,
              lessons: [
                { title: '2.1 专业技术一', duration: '50分钟' },
                { title: '2.2 专业技术二', duration: '45分钟' },
                { title: '2.3 专业技术三', duration: '55分钟' }
              ]
            },
            {
              title: '第三章：实践应用',
              isOpen: false,
              lessons: [
                { title: '3.1 案例分析一', duration: '50分钟' },
                { title: '3.2 案例分析二', duration: '45分钟' },
                { title: '3.3 综合实践', duration: '60分钟' }
              ]
            }
          ];
      }
    }
  }
}
</script>

<style scoped>
.course-container {
  width: 100%;
  background-color: #f8f9fa;
}

.course-content {
  width: 75%;
  margin: 0 auto;
  padding: 30px 0;
}

/* 课程头部样式 */
.course-header {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.course-image {
  flex: 0 0 40%;
}

.course-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.course-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.course-title {
  font-size: 32px;
  color: #1f2937;
  margin-bottom: 30px;
  line-height: 1.3;
}

.start-btn {
  padding: 12px 32px;
  background-color: #6d28d2;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.start-btn:hover {
  background-color: #5b21b6;
  transform: translateY(-2px);
}

/* 课程详情样式 */
.course-details {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.course-intro, .course-outline {
  margin-bottom: 40px;
}

.course-intro h2, .course-outline h2 {
  font-size: 24px;
  color: #1f2937;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.instructor-info {
  margin-bottom: 15px;
  font-size: 16px;
}

.label {
  color: #6b7280;
}

.description {
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* 章节样式 */
.chapters {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chapter {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.chapter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8f9fa;
  cursor: pointer;
}

.chapter-header h3 {
  font-size: 18px;
  color: #1f2937;
  margin: 0;
}

.toggle-icon {
  color: #6d28d2;
  font-size: 14px;
}

.chapter-content {
  padding: 0 20px 15px;
}

.chapter-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chapter-content li {
  padding: 12px 15px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.chapter-content li:hover {
  background-color: #f8f7fa;
  color: #6d28d2;
}

.chapter-content li:last-child {
  border-bottom: none;
}

.lesson-duration {
  color: #6b7280;
  font-size: 14px;
}
</style>